/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useRef } from 'react';
import { oneClickRegister } from '@/services/jdk/register';
import { DrawerForm, ProFormText, ProFormSelect, ProFormDependency } from '@ant-design/pro-form';
import type { ProFormInstance } from '@ant-design/pro-form';
import { formatOptions } from '../../../utils';
import { getFranchiseeList, getFranchiseeShopList } from '@/services/jdk/register';
import { message } from 'antd';

interface KbRegisterDrawer {
  actionRef: any;
  children: JSX.Element;
  winSize: string | undefined;
}
const Index = ({ actionRef, children, winSize }: KbRegisterDrawer) => {
  const formRef = useRef<ProFormInstance>();

  const getOptions = (value: { keyWords: string }) => {
    const { keyWords } = value;
    return getFranchiseeList({ league_name: keyWords }).then((res) => {
      const {
        data: { list = [] },
      } = res;
      return formatOptions(list);
    });
  };

  const getShopOptions = async (value: { league_id: string }) => {
    const { league_id } = value;
    return getFranchiseeShopList({ league_id }).then((res) => {
      const {
        data: { list = [] },
      } = res;
      return formatOptions(list);
    });
  };

  const onSubmit = async (values: any) => {
    const { code, msg } = await oneClickRegister(values);
    if (code == 0) {
      message.success('注册成功！');
      actionRef.current?.reload(true);
      return true;
    } else {
      message.error(msg);
      return false;
    }
  };

  return (
    <DrawerForm
      title='一键注册'
      width={winSize === 'xs' ? 350 : 500}
      trigger={children}
      formRef={formRef}
      onFinish={onSubmit}
      drawerProps={{
        destroyOnClose: true,
      }}
    >
      <ProFormText
        name='phone'
        width={300}
        fieldProps={{
          placeholder: '请输入聚单客注册账号（必填）',
        }}
        rules={[{ required: true, message: '请输入聚单客注册账号' }]}
      ></ProFormText>
      <ProFormSelect
        showSearch
        name='league_id'
        request={getOptions}
        debounceTime={300}
        fieldProps={{
          searchOnFocus: false,
          fetchDataOnSearch: true,
          placeholder: '绑定服务商（非必填）',
          style: { width: 300 },
          defaultActiveFirstOption: false,
          showArrow: false,
          filterOption: false,
          onChange: () => formRef.current?.resetFields(['staff_id']),
        }}
      />
      <ProFormDependency name={['league_id']}>
        {({ league_id }) => {
          return (
            <ProFormSelect
              name='staff_id'
              dependencies={['league_id']}
              request={league_id ? getShopOptions : undefined}
              fieldProps={{
                searchOnFocus: false,
                fetchDataOnSearch: false,
                placeholder: '选择归属员工（非必填）',
                style: { width: 300 },
                defaultActiveFirstOption: false,
                showArrow: false,
                filterOption: false,
              }}
            />
          );
        }}
      </ProFormDependency>
    </DrawerForm>
  );
};

export default Index;
